<template>
<div class="evaluation-index">
    <ve-histogram :colors="['#3F9EFF']" :legend-visible="true" :data-empty="chartData.rows.length===0" width="100%" height="400px" :settings="chartSettings" :extend="extend" :data="chartData"></ve-histogram>
</div>
</template>

<script>
import {
    mapGetters
} from 'vuex'
export default {
    name: 'EvalutionIndex',
    computed: {
        ...mapGetters({
            probability: 'common/getProbability',
            sample: 'common/getSample',
            modelDetail: 'common/getModelDetail',
            type: 'common/getType',
            evaluationData: 'common/getEvaluationData'
        })
    },
    data () {
        this.extend = {
            dataZoom: [{
                type: 'inside'
            }],
            grid: {
                left: '50px'
            },
            series: {
                showSymbol: false,
                barMaxWidth: 30,
                label: { show: true, position: 'top' }
            }
        }
        return {
            chartSettings: {
                digit: 4,
                yAxisName: ['Value']
            },
            obj: {},
            chartData: {
                columns: [],
                rows: []
            }
        }
    },
    created () {
        this.init()
    },
    methods: {
        init () {
            this.obj = this.modelDetail.summary.evaSummary.metricsOverview
            this.getData()
        },
        getData () {
            let columns = ['types', 'value']
            let TP = this.evaluationData.TP
            let FP = this.evaluationData.FP
            let TN = this.evaluationData.TN
            let p = this.obj.positiveSample
            let t = this.obj.totalSample
            let n = this.obj.negativeSample
            let ft = this.evaluationData.postN
            let v = TP / (TP + FP)
            let j = TP / p
            let Recall = TP / p
            let Precision = TP / (TP + FP)
            let Accuracy = (TP + TN) / t
            let TNR = TN / n
            let NPV = TN / ft
            let F1 = 2 * v * j / (v + j)
            let rows = []
            let arr = ['Recall', 'Precision', 'Accuracy', 'TNR', 'NPV', 'F1-Score']
            let val = [Recall, Precision, Accuracy, TNR, NPV, F1]
            for (let i = 0; i < arr.length; i++) {
                rows[i] = {
                    types: arr[i],
                    value: val[i].toFixed(4)
                }
            }
            this.chartData = {
                columns,
                rows
            }
        }
    },
    watch: {
        type () {
            this.getData()
        },
        probability () {
            this.getData()
        },
        sample () {
            this.getData()
        }
    }
}
</script>
<style lang="less">
    .evaluation-index {
        width: 60%;
    }
</style>
